<script>
import copy from 'copy-to-clipboard';
import { Tag, Toast } from 'vant';

export default {
  props: {
    prefix: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  components: {
    Tag
  },
  computed: {
  },
  data() {
    return {
    }
  },
  methods: {
    copyText() {
      if (copy(this.text)) {
        Toast.success({ message: '复制成功' })
      }
    }
  },
}
</script>

<template>
  <Tag type="success" @click="copyText">
    <div style="display: flex; align-items: center; gap: 5px; padding: 4px 2px;">
      <div style="display: flex; gap: 5px;">
        <span>{{ prefix }}</span>
        <span>{{ text }}</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 32 32">
        <path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"/>
        <path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"/>
      </svg>
    </div>
  </Tag>
</template>
